<!--
 * @Description: 
 * @Author: wgy
 * @CreateTime: 2022-12-19 14:30:13
 * @UpdateTime: 2022-12-19 14:35:36
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 定义一个容器 -->
    <div id="box"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-domm库 用于操作dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入props库 用于操作props -->
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <!-- 引入babel,用于将jsx转换为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        /*
            建议使用受控式组件可以达到双向绑定效果且不多用refs
        */
        class MyComponent extends React.Component {

            // 初始化state
            state = {
                username: "",
                password: ""
            }

            // 当事件操作对象是同一个的时候可以不使用ref
            login = (event) => {
                // 阻止原生表单提交
                event.preventDefault()
                const { username, password } = this.state
                alert(`你输入的账号是:${username},密码是:${password}`)
            }

            saveUsername = (event) => {
                // 绑定输入框和state
                this.setState({ username: event.target.value })
                console.log(event.target.value);
            }

            savePassword = (event) => {
                // 绑定密码框和state
                this.setState({ password: event.target.value })
                console.log(event.target.value);
            }

            render() {
                return (
                    <div>
                        <form onSubmit={this.login}>
                            <input type="text" onChange={this.saveUsername} name="username" placeholder="请输入账号" /><br />
                            <input type="password" onChange={this.savePassword} name="password" placeholder="请输入密码" />
                            <button>点击</button><br />
                        </form>
                    </div>
                )
            }
        }

        // 渲染元素
        ReactDOM.render(<MyComponent />, document.getElementById("box"))

    </script>
</body>

</html>